import shared from "../../utils/js/shared.js";
export default {
  name: "startPage",
  data() {
    return {
      ver: thisVersion,
    };
  },
  template: `
  <div id="startPage" class="routerRealPage">
    <div class="startPageRow" @click="loginOrQuit()">
      <span v-if="loginInfo" style="font-size: 1.5em; color: rgb(45, 86, 149);">
        欢迎，{{loginInfo.username}}!<br>您当前的rks为 {{loginInfo.rks.toFixed(3)}}<br>点击登出或切换账号
      </span>
      <span v-else style="font-size: 1.5em; color: rgb(45, 86, 149); z-index:114512;">
        未登录，点击登录。
      </span>
    </div>
    <div class="startPageRow">
    <br>
      <input type="button" value="单人游戏" @click="singleGame()">
    </div>
    <div class="startPageRow">
      <input type="button" value="多人游戏" @click="multiGame()">
    </div>
    <div class="startPageRow">
      <input type="button" value="缓存管理" @click="to('/cacheManage')">
    </div>
    <div class="startPageRow">
      <input type="button" value="游戏设置" @click="to('/settings')">
    </div><br>
    <div><br><a style="color:midnightblue; font-weight:bold;" @click="to('/aboutPage')">关于</a></div>
    <div style="display:none;" class="startPageRow">
      <div id="uploader" class="disabled">
        <input type="button" id="uploader-upload" value="调试：加载本地文件">
        <div id="uploader-select">
          <label id="uploader-file">加载文件</label>
          <label id="uploader-dir">加载文件夹</label>
        </div>
      </div>
    </div>
    <footer id="versionInfo" @click="to('/aboutPage')">PhiTogether v{{ver}} - &copy; 2023 Team PhiTogether</footer>
  </div>
  `,
  computed: {
    loginInfo() {
      return shared.game.ptmain.gameConfig.account.userBasicInfo;
    },
  },
  methods: {
    to(page) {
      this.$router.push(page);
    },
    async loginOrQuit() {
      if (!shared.game.ptmain.noAccountMode) {
        if (
          await shared.game.msgHandler.confirm(
            `您已以 ${this.loginInfo.username} 的身份登录，您要登出还是切换账号？`,
            "提示",
            "切换账号",
            "登出"
          )
        ) {
          this.to("/login");
        } else {
          shared.game.ptmain.gameConfig.account = {
            tokenInfo: null,
            userBasicInfo: null,
            defaultConfigID: null,
          };
          shared.game.ptmain.noAccountMode = true;
          shared.game.msgHandler.success("您已登出，现在您已进入离线模式。");
        }
      } else {
        this.to("/login");
      }
    },
    async singleGame() {
      if (!navigator.onLine) {
        await shared.game.msgHandler.warning(
          "您没有连接到互联网，将只能游玩本地缓存谱面。"
        );
        this.to({ path: "/chartSelect", query: { offline: 1 } });
        return;
      }
      if (shared.game.ptmain.noAccountMode) {
        if (
          await shared.game.msgHandler.confirm(
            "您当前处于离线模式，所有游玩数据将不会保存，要登录账号吗？"
          )
        ) {
          this.to({ path: "/login" });
          return;
        }
      }
      shared.game.ptmain.gameMode = "single";
      this.to({ path: "/chartSelect" });
    },
    async multiGame() {
      if (!navigator.onLine) {
        shared.game.msgHandler.failure(
          "您没有连接到互联网，无法进行多人游戏！"
        );
        return;
      }
      if (shared.game.ptmain.noAccountMode) {
        shared.game.msgHandler.failure(
          "您没有登录账号或账号状态异常，无法进行多人游戏，请重新登录后再试！"
        );
        this.to({ path: "/login" });
        return;
      }
      if (localStorage.lastMultiInfo) {
        const lastMultiInfo = JSON.parse(localStorage.lastMultiInfo);
        try {
          shared.game.loadHandler.l("正在恢复多人游戏", "recoverMulti");
          const resp = await fetch(
            `/api/multi/requestRoom/${lastMultiInfo.room.id}`
          );
          const result = await resp.json();
          if (result.code === -2) {
            shared.game.loadHandler.r("recoverMulti");
            await shared.game.msgHandler.warning(
              "尝试恢复未正常退出的多人游戏失败，如需开启新的多人游戏请重新点击多人游戏按钮。"
            );
            localStorage.removeItem("lastMultiInfo");
            return;
          } else {
            shared.game.multiInstance.recoverMulti(lastMultiInfo);
          }
        } catch {
          shared.game.loadHandler.r("recoverMulti");
          shared.game.msgHandler.sendMessage(
            "恢复未正常退出的多人游戏时遇到网络错误，请点击多人游戏按钮重试"
          );
        }
        return;
      }
      shared.game.multiInstance.startMultiUI();
    },
  },
};
